<template>
  <view class="u-page__item">
    <u-navbar :class="{'index':custom}" :leftText="leftText" :show="show" :title="title" :autoBack="autoBack" :custom="custom"
              :bgColor="bgColor" placeholder="true" @leftClick="showMenu" v-if="custom">
      <view class="u-nav-slot my-text two-row" slot="left">
        <view @click="showMenu" class="change">
          <u--text :bold="true" size="34" color="#006737" :selectable="false" text="切换门店"/>
          <i class="iconfont icon-qiehuan"></i>
        </view>
        <view>
          <u--text :lines="1" :bold="false" size="26" color="#222" :selectable="false" :text="store.roomName"/>
          <u--text :lines="1" :bold="false" size="22" color="#999" text="营业时间：06:20~17:00"/>
        </view>
      </view>
      <view slot="right" class="r-icon">
        <i class="iconfont icon icon-dingwei1"></i>
        <u-button class="green-bg" color="#006737" shape="circle" background="#02a257" size="mini" @click="toRecharge">
          预约
        </u-button>

      </view>
    </u-navbar>
    <u-navbar :leftIcon="leftIcon" :leftText="leftText" :title="title" :autoBack="autoBack" :custom="custom"
              :bgColor="bgColor" placeholder="true" :titleStyle="titleStyle" :leftIconSize="leftIconSize"
              :leftIconColor="leftIconColor" v-else="custom">
    </u-navbar>
  </view>
</template>

<script>
import {
  mapState,
} from 'vuex'

export default {
  name: "my-navbar",
  props: {
    leftText: {
      default: ' ',
      type: String
    },
    title: {
      default: " ",
      type: String
    },
    custom: {
      default: false,
      type: Boolean
    },
    autoBack: {
      default: true,
      type: Boolean
    },
    bgColor: {
      default: "transparent",
      type: String
    },
    leftIcon: {
      default: "",
      type: String
    },
    show: {
      default: false,
      type: Boolean
    },
    titleStyle: {
      type: [String, Object],
      default: uni.$u.props.navbar.titleStyle
    },
    // 左侧返回图标的大小
    leftIconSize: {
      type: [String, Number],
      default: uni.$u.props.navbar.leftIconSize
    },
    // 左侧返回图标的颜色
    leftIconColor: {
      type: String,
      default: uni.$u.props.navbar.leftIconColor
    },
    storeName: {
      type: String,
      default: '请选择门店'
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(['store'])
  },
  methods: {
    toRecharge() {
      uni.navigateTo({
        url: "/pages/order/order"
      })
    },
    showMenu() {
      // this.show = true
      console.log("navbar showMenu " + this.show)

      this.$emit('changeShow')

    },
    leftClick() {
      console.log("navbar")
      this.$emit('leftClick')
    }
  },
  mounted() {
    console.log("mounted")
  }
}
</script>

<style lang="less" scoped>
@theme-color:#006737;
.two-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0rpx 0rpx 20rpx 0rpx;
}
.r-icon{
  margin:50rpx 0rpx 0rpx 0rpx;
  display: flex;
  .icon{
    font-size:40rpx;
    color:#02a257;
    margin-right:20rpx;
  }
}
::v-deep .u-tabbar--fixed{
  border:0px !important;
}

.my-text {
  color: #000000 !important;
  opacity: 1 !important;
}
.u-navbar{
  &.index{
    height:160rpx;
    .u-navbar--fixed{
    }
    ::v-deep .u-navbar--fixed{
      background: linear-gradient(to right, #abfcd9 0%, #d8fded 100%) !important;
    }
  }
}

</style>
